<template>
	<div>
		<div style="display: flex;justify-content: space-between;padding: 19px 20px;" class="line2" @click="housedetails(source)">
					<img :src="source.showImg?source.showImg:source.image" style="width: 31%;cursor: pointer;height: 136px;object-fit: contain;background-color: rgb(209 204 204 / 20%);" @click="housedetails(source)" alt />
					<div style="width: 50%;display: flex;flex-direction: column;justify-content: space-between;margin-left:10px;">
						<div style="color: #333333;font-size: 18px;font-weight: 600;cursor: pointer;" class="line1">{{source.title}}</div>
						<div style="color: #666666;font-size: 14px;font-weight: 400;margin-top: 8px;margin-bottom: 8px;">{{source.region}} {{source.address}}</div>
						<div style="flex-grow: 1;"></div>
					</div>
					<div style="width: 20%;display: flex;flex-direction: column;justify-content: center;">
						<div style="color: #333333;font-size: 20px;font-weight: 400;">{{source.averagePrice}}元/㎡</div>
					</div>
				</div>
	</div>
</template>

<script>
	export default {
		props: {
			index: {
				type: Number

			},
			source: {
				type: Object,
				default () {
					return {};
				}
			}
		},
		data() {
			return {

			}
		},
		methods: {
            housedetails(item){
				const routeLink = this.$router.resolve({
					path: '/index/storeyDetails?id='+item.id
				})
				window.open(routeLink.href, '_blank')
			},
		}
	}
</script>

<style lang="less" scoped>

</style>
